<!--
 * @Date: 2023-06-08 09:49:49
 * @LastEditTime: 2025-03-29 16:34:28
 * @Description: content
-->
<template>
    <view class="content">
        <!-- <view class="header">
			<view :style="{
          height: `calc(${$sys().statusBarHeight}px)`
        }"></view>
			<view class="header-left-title">
				<image :src="$img('/static/img2/cc5.png')" mode="scaleToFill" />
			</view>
		</view> -->
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="loadData" :down="downOption" :up="upOption">
            <view class="sw-wrap">
                <swiper class="swiper-box" :autoplay="true" :indicator-dots="false" :circular="true" :interval="3000" @change="swChange">
                    <swiper-item class="sw-item" v-for="(v, i) in advert" :key="i" @click="$c.navTo(v)">
                        <view class="pic">
                            <image class="yh_bg" :src="v.imgurl"></image>
                        </view>
                    </swiper-item>
                </swiper>

                <!-- <view v-if="advert.length && advert[swCur].title" class="pic-title c_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc1.png')})`
          }">
					<view class="title hang1">
						{{ advert[swCur].title }}
					</view>
				</view>

				<view class="sw-dot">
					<view class="sw-dot-item" v-for="(item, i) in advert" :key="i" :class="{
              act: swCur == i
            }"></view>
				</view> -->
            </view>

            <view class="news-box c_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc193.png')})`
        }" @click="$refs.rulePop.getRule(3, '提示')">
                <view class="icon">
                    <!-- <image :src="$img('/static/img/1_lb.png')" lazy-load></image> -->
                </view>

                <view class="news-text">
                    <uni-notice-bar :style="{
              width: `100%`
            }" :speed="30" background-color="transparent" color="#fff" scrollable single :text="$c.filterText(gonggao)"></uni-notice-bar>
                </view>
            </view>

            <view class="nav-list">
                <!-- 签到 -->
                <view class="nav-item" @click="$c.to({ url: '/package/index/sign' })">
                    <image :src="$img('/static/img2/cc192.png')" lazy-load></image>
                </view>
                <!-- 排行榜 -->
                <view class="nav-item" @click="$c.to({ url: '/package/index/rank' })">
                    <image :src="$img('/static/img2/cc194.png')" lazy-load></image>
                </view>
                <!-- 邀请 -->
                <view class="nav-item" @click="gotoPage('/pages/user/tui-guang')">
                    <image :src="$img('/static/img2/cc196.png')" lazy-load></image>
                </view>
                <!-- 进群 -->
                <view class="nav-item" @click="$refs.qunliao_show.open()">
                    <image :src="$img('/static/img2/cc195.png')" lazy-load></image>
                </view>
            </view>

            <image class="pass-btn" :src="$img('/static/img2/cc199.png')" mode="widthFix" @click="gotoPage('/package/index/climbList')"></image>

            <scroll-view scroll-x class="tab-list">
                <view @click="getlist(i)" v-for="(v, i) in tabList" :key="i" class="tab-list-item" :class="{
            active: tabCur == i
          }">
                    <text>
                        {{ v.title }}
                    </text>

                    <view class="act-tag icon">
                        <image v-if="tabCur == i" :src="$img('/static/img2/cc190.png')" lazy-load></image>
                    </view>
                </view>
            </scroll-view>

            <view class="qbt_con">
                <view v-for="(item, index) in listdata" :key="index" class="qbt_con_item c_bg" :style="{
            'background-image': `url(${$img('/static/img2/cc191.png')})`
          }" @click="todetails(item)">
                    <view class="list_1">
                        <image :src="item.imgurl" mode="aspectFill"></image>
                    </view>
                    <view class="list_2">
                        <view class="hang1">{{ item.title }}</view>

                        <view class="qbt_con_item_3 flex_center">
                            <view class="item-price">
                                ￥
                                <text style="font-size: 30rpx">{{ item.price }}</text>
                            </view>
                            <view v-if="item.stock" class="qbt_con_item_price">
                                <text>{{ item.sale_stock }}/{{ item.stock }}</text>
                                <image :src="$img('/static/img2/box.png')"></image>
                            </view>
                        </view>
                    </view>
                    <image :src="$img('/static/img2/cc197.png')" class="image1" v-if="index < 2"></image>

                    <view class="image3 c_bg" :style="{
              backgroundImage: `url(${$img('/static/img2/cc200.png')})`
            }">
                        <text>
                            {{ item.type_text }}
                        </text>
                    </view>

                    <view v-if="item.is_shou_zhe == 1" class="half-tag">
                        <image :src="$img('/static/img2/cc9.png')" lazy-load></image>
                    </view>

                    <view v-if="item.type == 1 || item.type == 6" class="lock-tag" :class="{
              dis: item.lock_is != 1
            }">
                        {{ item.lock_is == 1 ? '锁箱' : '竞技' }}
                    </view>
                </view>
            </view>
        </mescroll-body>

        <view class="r-fixed" @click="toggleBgmPlay()">
            <image v-if="bgmPlay" :src="$img('/static/img2/cc201.png')" lazy-load></image>
            <image v-else :src="$img('/static/img2/cc202.png')" lazy-load></image>
        </view>

        <tab-bar :index="0"></tab-bar>

        <!-- 群聊弹窗 -->
        <uni-popup ref="qunliao_show" type="center">
            <view class="pop common_bg" :style="{
          'background-image': `url(${$img('/static/img2/cc28.png')})`
        }">
                <image :src="erweima" :show-menu-by-longpress="true"></image>

                <!-- <view @click="$refs.qunliao_show.close()" class="icon">
          <image :src="$img('/static/img/close1.png')" mode="scaleToFill" />
        </view> -->
            </view>
        </uni-popup>

        <!-- 优惠券弹窗 -->
        <uni-popup ref="couponPop" type="center">
            <view v-if="couponData" class="coupon-pop">
                <view class="coupon-pop-hd common_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc17.png')})`
          }">
                    <view class="coupon-pop-title">
                        <text>新人大礼包</text>
                    </view>

                    <scroll-view class="coupon-list" scroll-y>
                        <view v-for="(item, i) in couponData.goods.list" :key="i" class="coupon-item common_bg" :style="{
                backgroundImage: `url(${$img('/static/img2/cc16.png')})`
              }">
                            <view class="tag">新人专享</view>

                            <view class="coupon-l">
                                <view class="l-inner">
                                    ¥
                                    <text>{{ Number(item.price) || 0 }}</text>
                                </view>
                            </view>

                            <view class="coupon-info">
                                <view class="rule">满{{ item.man_price }}减{{ item.price }}</view>

                                <view class="time">领取后{{ item.effective_day }}天到期</view>
                            </view>
                        </view>

                        <view class="gap-box"></view>
                    </scroll-view>
                </view>

                <view class="bt-tip">优惠券详情可在【我的-优惠券】中查看</view>

                <view @click="receiveCoupon" class="get-btn c_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc18.png')})`
          }">
                    <!-- 立即收下 -->
                </view>
            </view>
        </uni-popup>

        <rule-pop ref="rulePop"></rule-pop>

        <rule-pop ref="appNotice" notice-check></rule-pop>

        <!-- #ifdef MP -->
        <!-- 隐私政策弹窗 -->
        <priv-pop></priv-pop>
        <!-- #endif -->
    </view>
</template>

<script>
import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
export default {
    components: {
        lffBarrage
    },
    data() {
        return {
            z_imgPath: this.$z_img2 + 'shouye/',
            tabList: [
                // {
                //   id: 2,
                //   title: '无限赏'
                // },
                // {
                //   id: 8,
                //   title: '领主赏'
                // },
                // {
                //   id: 9,
                //   title: '连击赏'
                // },
                // {
                //   id: 3,
                //   title: '擂台赏'
                // },
                // {
                //   id: 1,
                //   title: '一番赏'
                // },
                // {
                //   id: 6,
                //   title: '全局赏'
                // }
                //  {
                // id:4,
                //   title: '抽卡机'
                // },
                //  {
                // id:5,
                //   title: '积分赏'
                // },
                //  {
                // id:7,
                //   title: '福利盲盒'
                // },
            ],
            tabCur: 0,
            keyword: '',
            listdata: [],
            // 下拉刷新的配置(可选, 绝大部分情况无需配置)
            downOption: {
                auto: false
            },
            // 上拉加载的配置(可选, 绝大部分情况无需配置)
            upOption: {
                auto: false,
                page: {
                    size: 15 // 每页数据的数量,默认10
                }
            },
            advert: [], //轮播图
            notice_list: [], // 弹幕
            erweima: '', // 福利群
            yushou_rili: '', // 预售日历
            jump_appid: '', // 跳转的小程序id
            aa: false,
            gonggao: '',
            couponData: '',
            canGetCoupon: false,
            swCur: 0,
            bgmPlay: false
        }
    },

    onShareAppMessage() {
        let that = this
        return {
            title: '快来加入简单模玩',
            imageUrl: that.advert[0].imgurl,
            path: '/pages/shouye/index?pid=' + uni.getStorageSync('userinfo').ID
        }
    },

    onLoad(v) {
        console.log('参数', v)

        if (v.pid) {
            uni.setStorageSync('pid', v.pid)
        }
        if (v.scene) {
            uni.setStorageSync('pid', v.scene)
        }
        if (v.token) {
            uni.setStorageSync('token', v.token)
        }
        /* 获取广告id */
        if (v.ad_id) {
            uni.setStorageSync('_ad_id', v.ad_id)
        }
        /* 获取click_id */
        if (v.gdt_vid) {
            uni.setStorageSync('_click_id', v.gdt_vid)
        }
    },
    onShow() {
        let that = this
        this.aa = true

        this.canGetCoupon && this.getCoupon()
        this.canGetCoupon && this.getnews()
        this.canGetCoupon = true
    },

    onReady() {
        this.downCallback()
        this.getCoupon()
        this.getnews()
        this.initBgm()

        // this.couponData = {
        //   goods: {
        //     list: [
        //       {
        //         price: 23.3,
        //         man_price: 100,
        //         effective_day: 5
        //       },
        //       {
        //         price: 23.3,
        //         man_price: 100,
        //         effective_day: 5
        //       },
        //       {
        //         price: 23.3,
        //         man_price: 100,
        //         effective_day: 5
        //       },
        //       {
        //         price: 23.3,
        //         man_price: 100,
        //         effective_day: 5
        //       },
        //       {
        //         price: 23.3,
        //         man_price: 100,
        //         effective_day: 5
        //       }
        //     ]
        //   }
        // }

        // this.$refs.couponPop.open()
        // this.$refs.rulePop.open()
    },

    onHide() {
        clearInterval(this.timer)
        this.aa = false
        let pages = getCurrentPages()
        // console.log(11, this.$mp.page.route)
        uni.setStorageSync('page', this.$mp.page.route)
    },
    onUnload() {
        this.aa = false
    },

    methods: {
        /**
         * 背景音乐播放初始化
         */
        initBgm() {
            if (!this.bgmCtx || !this.bgmCtx.bgmMusic) {
                setTimeout(() => {
                    console.log('重新加载背景音乐')
                    this.initBgm()
                }, 500)
                return
            }

            if (uni.getStorageSync('_can_play_music') != 2) {
                console.log(111)

                uni.setStorageSync('_can_play_music', 1)
                this.bgmCtx.bgmMusic.play()
                this.bgmPlay = true
            }
            console.log(222)
        },

        /**
         * 播放/暂停 背景音乐
         */
        toggleBgmPlay() {
            if (!this.bgmCtx || !this.bgmCtx.bgmMusic) {
                this.$c.toast({
                    title: '音频加载中,请稍后'
                })
            }

            if (this.bgmPlay) {
                this.bgmCtx.bgmMusic.pause()
                this.bgmPlay = false
                uni.setStorageSync('_can_play_music', 2)
            } else {
                this.bgmCtx.bgmMusic.play()
                this.bgmPlay = true
                uni.setStorageSync('_can_play_music', 1)
            }
        },

        async downCallback() {
            await this.getTab()
            this.mescroll.resetUpScroll()
        },

        getTab() {
            return new Promise((resolve, reject) => {
                this.req({
                    url: 'menu',
                    data: {},
                    success: res => {
                        if (res.status == 1) {
                            this.tabList = res.data.data
                            resolve()
                        }
                    }
                })
            })
        },

        /**
         * @description: 是否弹公告
         * @return {*}
         */
        checkNotice() {
            /* 上次勾选(今日不再提醒)的日期 */
            const _last_notice_date = uni.getStorageSync('_last_notice_date')
            /* 本次打开app是否已经弹过公告弹窗 */
            const _is_this_show = uni.getStorageSync('_is_this_show')
            const nowDate = this.$c.getDateTime()

            if (_last_notice_date != nowDate && !_is_this_show) {
                this.$refs.appNotice.getRule(19, '公告')
                uni.setStorageSync('_is_this_show', true)
            }
        },

        swChange(e) {
            this.swCur = e.detail.current
        },

        receiveCoupon() {
            let arr = this.couponData.goods.list.map(item => item.id)

            if (arr.length <= 0) {
                return
            }

            this.req({
                url: 'receive',
                data: {
                    coupon_id: arr.join(',')
                },
                success: res => {
                    if (res.status == 1) {
                        setTimeout(() => {
                            uni.showToast({
                                title: '领取成功',
                                icon: 'success'
                            })
                        }, 100)

                        this.$refs.couponPop.close()
                    }
                }
            })
        },

        getCoupon() {
            this.req({
                url: 'coupon',
                data: {},
                success: res => {
                    if (res.status == 1 && res.data.status != 2) {
                        res.data.totalMoney = 0

                        if (res.data.goods.list.length > 0) {
                            res.data.totalMoney = res.data.goods.list.reduce((pre, item) => {
                                return pre + Number(item.price)
                            }, 0)

                            this.$refs.couponPop.open()
                        }

                        this.couponData = res.data
                    }
                }
            })
        },

        torili() {
            uni.setStorageSync('rili', this.yushou_rili)
            this.gotoPage('/pages/shouye/rili')
        },
        getnews() {
            let that = this
            that.req({
                url: 'index',
                success(res) {
                    if (res.status == 1) {
                        that.advert = res.data.advert
                        that.notice_list = res.data.new_bulletcha
                        that.erweima = res.data.other.erweima
                        that.gonggao = res.data.notice.content
                        that.yushou_rili = res.data.other.yushou_rili
                        that.jump_appid = res.data.other.jump_appid
                        uni.setStorageSync('jump_appid', res.data.other.jump_appid)
                        uni.setStorageSync('wx_link', res.data.other.wx_link)
                        uni.setStorageSync('corpid', res.data.other.corpid)

                        if (res.data.other.is_shou_tan == 1) {
                            that.checkNotice()
                        }
                    }
                }
            })
        },

        loadData({ num, size }) {
            // 模拟接口
            let that = this
            that.req({
                url: 'goods',
                data: {
                    page: num,
                    type: this.tabList.length ? that.tabList[that.tabCur].id : '',
                    keyword: that.keyword
                },
                success: function (res) {
                    that.mescroll.endByPage(res.data.data.length, res.data.last_page)
                    if (num == 1) {
                        that.listdata = res.data.data
                    } else {
                        that.listdata = that.listdata.concat(res.data.data)
                    }
                    console.log(that.listdata)
                }
            })
        },
        todetails(e) {
            // 无限赏
            let url = '/pages/shouye/detail'

            if (e.type == 2 || e.type == 8) {
                url = '/pages/shouye/detail_wuxian'
            }

            if (e.type == 9) {
                url = '/package/index/lian-ji'
            }

            this.$c.to({
                url,
                query: {
                    goods_id: e.id,
                    type_text: e.type_text
                }
            })
        },
        getlist(v) {
            this.tabCur = v
            this.listdata = []
            this.mescroll.resetUpScroll()
            this.mescroll.scrollTo(0, 0)
        }
    }
}
</script>

<style lang="scss">
.yaoStyle {
    width: 749rpx;
    height: 108rpx;
    line-height: 120rpx;
    margin: 0 auto;
    padding-left: 280rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
}

.paiStyle {
    width: 704rpx;
    height: 82rpx;
    line-height: 82rpx;
    margin: 21rpx auto 0;
    padding-left: 120rpx;
    padding-right: 70rpx;
    padding-top: 20rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    color: #fff;
    position: relative;
    text-shadow: 0 0 10rpx #ba39ff;
}

.paiStyle > image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 22rpx;
    right: 55rpx;
}

.pop {
    width: 690rpx;
    height: 690rpx;
    padding-top: 1rpx;
    box-sizing: border-box;
    position: relative;

    image:nth-of-type(1) {
        width: 400rpx;
        height: 400rpx;
        margin: 66rpx auto 0;
        display: block;
    }

    .icon {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 160%);

        image {
            width: 100%;
            height: 100%;
        }
    }
}

.image2 {
    width: 115rpx;
    height: 62rpx;
    position: absolute;
    top: 10rpx;
    right: 10rpx;
}

.gonggao {
    width: 750rpx;
    height: 300rpx;
    border-radius: 39rpx;
    margin: 0rpx auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    /* position: relative; */
    position: absolute;
    top: 330rpx;
    z-index: 16;
    pointer-events: none;
}

// .header {
// 	width: 100%;
// 	position: fixed;
// 	left: 0;
// 	top: 0;
// 	z-index: 10;

// 	.header-left-title {
// 		height: 88rpx;
// 		font-weight: bold;
// 		color: #ffffff;
// 		display: flex;
// 		align-items: center;
// 		padding-left: 26rpx;

// 		image {
// 			width: 202rpx;
// 			height: 42rpx;
// 		}
// 	}
// }

.sw-wrap {
    width: 100%;
    height: 440rpx;
    position: relative;

    .swiper-box {
        width: 100%;
        height: 100%;

        .sw-item {
            .pic {
                width: 100%;
                height: 100%;
                position: relative;

                .yh_bg {
                    width: 100%;
                    height: 100%;
                    border-radius: inherit;
                }
            }
        }
    }

    // .pic-title {
    // 	width: 100%;
    // 	height: 104rpx;
    // 	box-sizing: border-box;
    // 	position: absolute;
    // 	left: 0;
    // 	bottom: -46rpx;
    // 	z-index: 1;
    // 	padding-top: 10rpx;
    // 	padding-left: 30rpx;
    // 	padding-right: 200rpx;

    // 	.title {
    // 		font-family: 光良酒-干杯体, 光良酒-干杯体;
    // 		font-weight: 400;
    // 		font-size: 40rpx;
    // 		color: #ffffff;
    // 		text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 4px #000, 0 0 4px #000;
    // 	}
    // }

    // .sw-dot {
    // 	display: flex;
    // 	justify-content: center;
    // 	position: absolute;
    // 	right: 30rpx;
    // 	bottom: 10rpx;
    // 	z-index: 2;

    // 	.sw-dot-item {
    // 		width: 8rpx;
    // 		height: 8rpx;
    // 		border-radius: 8rpx;
    // 		background: #ff9f9f;
    // 		margin: 0 4rpx;
    // 		transition: 0.3s;

    // 		&.act {
    // 			width: 28rpx;
    // 			background-color: #fff;
    // 		}
    // 	}
    // }
}

.news-box {
    width: 694rpx;
    height: 56rpx;
    margin: 30rpx auto 0;
    display: flex;
    // justify-content: space-between;
    align-items: flex-start;

    .icon {
        width: 176rpx;
        height: 100%;
    }

    .news-text {
        width: 490rpx;
        height: 50rpx;
        display: flex;
        align-items: center;

        /deep/.uni-noticebar__content-text {
            font-size: 24rpx;
        }
    }
}

.nav-list {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx 0;

    .nav-item {
        width: 160rpx;
        height: 94rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }
}

.pass-btn {
    display: block;
    width: 694rpx;
    height: 150rpx;
    margin: 0 auto;
}

.tab-list {
    white-space: nowrap;
    width: 100%;
    position: relative;
    margin-top: 30rpx;

    .tab-list-item {
        // min-width: 148rpx;
        height: 64rpx;
        display: inline-flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 0 24rpx;
        margin-left: 20rpx;
        filter: grayscale(1);

        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        text-shadow: 0 0 2px #ff1010, 0 0 2px #ff1010, 0 0 2px #ff1010,
            0 0 2px #ff1010;

        // &:first-child {
        //   margin-left: 30rpx;
        // }

        // &:last-child {
        //   margin-right: 30rpx;
        // }

        &.active {
            filter: grayscale(0);
        }

        .act-tag {
            margin: 6rpx 0 0;
            width: 42rpx;
            height: 8rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.content {
    /* background: #222222; */
    width: 100vw;
    /* height: 100vh; */
    box-sizing: border-box;
    position: relative;
    background-attachment: fixed;
    position: relative;
}

.title_ipt {
    display: flex;
    align-items: center;
    margin: 20rpx auto;
    border-radius: 30rpx;
    padding-left: 30rpx;
    width: 620rpx;
    height: 58rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10rpx;
    box-sizing: border-box;
}

.title_ipt > image {
    width: 33rpx;
    height: 33rpx;
}

.title_ipt > input {
    width: 90%;
    height: 58rpx;
    box-sizing: border-box;
    border-radius: 105rpx;
    font-size: 28rpx;
    line-height: 58rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    padding-left: 20rpx;
}

.title_ipt > view {
    width: 90rpx;
    height: 40rpx;
    background: linear-gradient(0deg, #1ac762 0%, #35ed85 100%);
    border-radius: 18rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
}

.qiehuan {
    display: flex;
    /* 	justify-content: space-between; */
    align-items: center;
    width: 690rpx;
    margin: 20rpx auto 0;
    box-sizing: border-box;
    font-weight: bold;
}

.qiehuan_line {
    margin: -10rpx auto;
    width: 50rpx;
    height: 20rpx;
    border-bottom: 4rpx solid #ff7514;
    border-radius: 2rpx;
}

.qiehuan > view {
    margin-right: 10rpx;
    /* flex: 1;
		text-align: center; */
}

.wzs {
    font-size: 32rpx;
    color: rgba(255, 255, 255, 0.6);
}

.xzs {
    font-size: 34rpx;
    color: #ff7514;
}

.qbt_con {
    padding: 1rpx 30rpx 100rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.qbt_con_item {
    padding: 1rpx 0 0;
    width: 330rpx;
    padding-bottom: 20rpx;
    // height: 500rpx;
    margin-top: 30rpx;
    position: relative;

    .image1 {
        width: 106rpx;
        height: 40rpx;
        position: absolute;
        z-index: 1;
        top: 22rpx;
        left: 0;
    }

    .image3 {
        position: absolute;
        z-index: 1;
        top: 22rpx;
        right: 12rpx;
        padding: 0 16rpx;
        box-sizing: border-box;
        min-width: 90rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        text {
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 26rpx;
            color: #ffffff;
            text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
        }
    }

    .half-tag {
        width: 228rpx;
        height: 58rpx;
        position: absolute;
        left: 12rpx;
        top: 270rpx;
        z-index: 1;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .lock-tag {
        position: absolute;
        right: 12rpx;
        top: 294rpx;
        z-index: 1;
        padding: 0 14rpx;
        height: 36rpx;
        background: #e4690d;
        border-radius: 4rpx;
        display: flex;
        align-items: center;

        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 20rpx;
        color: #ffffff;

        &.dis {
            // background: linear-gradient(90deg, #729fdb 0%, #d0dbff 100%);
        }
    }
}

.list_1 {
    width: 310rpx;
    margin: 20rpx auto 0;
    height: 310rpx;
    border-radius: 10rpx;
    /* position: relative; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.list_1 > image {
    width: 100%;
    height: 100%;
}

.list_2 {
    padding: 20rpx 20rpx 0;

    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
}

.redu {
    margin-top: 10rpx;

    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #cccccc;
}

.qbt_con_item_3 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rpx;
    color: #fff;
    // text-shadow: 0px 2px 8px rgba(233, 18, 252, 0.41);

    .item-price {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #ff0013;

        // text {
        //   font-size: 36rpx;
        // }
    }
}

.qbt_con_item_price {
    display: flex;
    align-items: center;

    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #cccccc;
}

.qbt_con_item_price > image {
    width: 26rpx;
    height: 26rpx;
    margin-left: 6rpx;
}

.redu > image {
    width: 32rpx;
    height: 32rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

.r-fixed {
    width: 84rpx;
    height: 84rpx;
    position: fixed;
    right: 20rpx;
    bottom: 500rpx;
    z-index: 10;

    image {
        width: 100%;
        height: 100%;
    }
}

.coupon-pop {
    position: relative;

    .coupon-pop-hd {
        width: 590rpx;
        padding: 0 0 20rpx;

        .coupon-pop-title {
            display: flex;
            justify-content: center;
            padding: 40rpx 0 30rpx;

            text {
                font-family: 光良酒-干杯体, 光良酒-干杯体;
                font-weight: 400;
                font-size: 32rpx;
                color: #ffffff;
                text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000,
                    0 0 2px #000;
            }
        }

        .coupon-list {
            // margin-top: 30rpx;
            height: 520rpx;

            .coupon-item {
                width: 540rpx;
                margin: 0 auto 20rpx;
                display: flex;
                align-items: center;
                position: relative;
                padding: 30rpx 0;

                .tag {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 104rpx;
                    height: 36rpx;
                    background: #e4690d;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #ffffff;
                }

                .coupon-l {
                    width: 170rpx;
                    height: 100rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    box-sizing: border-box;
                    // background: #f00;

                    font-size: 24rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #ffffff;

                    text {
                        font-size: 40rpx;
                    }
                }

                .coupon-info {
                    // width: 360rpx;
                    box-sizing: border-box;
                    padding-left: 30rpx;

                    .rule {
                        font-size: 28rpx;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #ffffff;
                    }

                    .time {
                        margin-top: 20rpx;

                        font-size: 24rpx;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #dddddd;
                    }
                }
            }

            .gap-box {
                width: 100%;
                height: 60rpx;
            }
        }
    }

    .bt-tip {
        padding: 30rpx 0 40rpx;
        text-align: center;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
    }

    .get-btn {
        margin: 0 auto 0;
        width: 500rpx;
        height: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
